import { Canvas, Meta, Source } from '@storybook/blocks'

import * as TableStories from './table.stories'

<Meta of={TableStories} />

# Table

A responsive table component.

## Preview

<Canvas of={TableStories.Default} />

## Usage

export const importCode = `import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@orbitkit/ui/table";`

export const usageCode = `<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>
`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />
